<{include file="public_html/header.html"}>
<{include file="public_html/left_menu.html"}>
	<!-- content starts -->
	<blockquote class="layui-elem-quote"><{$action}></blockquote>
	<div>
		<ul class="layui-tab-title">
			<li <{if $type == 1}>class="layui-this"<{/if}> style="width:50%;<{if $type == 1}>font-weight: bold;color:red; font-size:16px;<{/if}>"><a href="/user/active/1">按周统计</a></li>
			<li <{if $type == 2}>class="layui-this"<{/if}> style="width:50%;<{if $type == 2}>font-weight: bold;font-size:16px;<{/if}>"><a href="/user/active/2">按月统计</a></li>
		</ul>
	</div>
	<div>
		<div style="width: 50px; float: left;"><a href="/user/active/<{$type}>/<{$limit+1}>">上一<{if $type == 1}>周<{else}>月<{/if}></a></div>
		<div id="main" style="min-height:600px; width: 90%;float: left;"></div>
		<div style="width: 50px; float: left;"><a href="/user/active/<{$type}>/<{$limit-1}>">下一<{if $type == 1}>周<{else}>月<{/if}></a></div>
	</div>
<{include file="public_html/footer.html"}>
<script src="/static/public/echarts/echarts.min.js"></script>
<script>
	var myChart = echarts.init(document.getElementById('main'));
	var active_data = eval('(<{$active_list}>)'); 
console.log(active_data);
	option = {
		title: {
            text: '<{$echarts_title}>',
            link: '',
            target:'blank',
            subtext:'活跃用户'
        },
		tooltip : {
			trigger: 'axis',
			axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		legend: {
			data:['新增用户','活跃用户']
		},
		grid: {
			left: '2%',
			right: '2%',
			bottom: '3%',
			containLabel: true
		},
		xAxis : [
			{
				type : 'category',
				// data : ['周一','周二','周三','周四','周五','周六','周日']
				data:active_data.date
			}
		],
		yAxis : [
			{
				type : 'value'
			}
		],
		series : [
			{
				name:'新增用户',
				type:'bar',
				data:active_data.reg_user
			},
			{
				name:'活跃用户',
				type:'bar',
				data:active_data.active_user
			}
		],
		toolbox: {
	        show : true,
	        feature : {
	            mark : {show: true},
	            dataView : {show: true, readOnly: false},
	            magicType : {show: true, type: ['line', 'bar']}, 
	            restore : {show: true}, 
	            selfButtons:{//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字
	                   show:true,//是否显示
	                   title:'自定义', //鼠标移动上去显示的文字
	                   icon:'test.png', //图标
	                   option:{},
	                   onclick:function(option1) {//点击事件,这里的option1是chart的option信息
	                         alert('1');//这里可以加入自己的处理代码，切换不同的图形
	                         }
	                    },
	            saveAsImage : {show: true}
	        }
	    }
	};
	myChart.setOption(option);
	myChart.on('click', function (params) {
		var seriesName = params.seriesName
	    if(seriesName == '新增用户'){
	    	var user_type = 1;
	    }else if(seriesName == '活跃用户'){
	    	var user_type = 2;
	    }
	    var start_time = active_data.date_time[params.dataIndex];
	    var end_time = start_time;
	    if(user_type == 1){
	    	window.open("/user/index/0/"+start_time+"/"+end_time+"/all/"+user_type);
	    }else{
	    	window.open("/user/active_list/"+params.name+"/"+params.name);
	    }
	});
</script>